@import '~@/styles/var.scss';
@import '~@/styles/mixin.scss';
@import '~@/styles/playCount.scss';

$classPrefix: column;
.#{$classPrefix}-wrapper {
  display: flex;
  flex-flow: wrap;
  padding: 0 10px;
  .#{$classPrefix}-item {
    min-width: 0;
    flex: 0 0 33.33333%;
    box-sizing: border-box;
    padding: 20px 5px 0;
    .#{$classPrefix}-img {
      width: 100%;
      height: 0;
      padding-top: 100%;
      border-radius: 10px;
      overflow: hidden;
      @include playCount;
      img {
        position: absolute;
        top: 0;
        left: 0;
        @include img-full;
      }
    }
    .#{$classPrefix}-title {
      height: 100px;
      margin: 20px 10px;
      line-height: 50px;
      color: $columnList-title-color;
      font-size: $font-size-small-x;
      word-wrap: break-word;
      word-break: break-all;
      @include no-wrap(2);
    }
  }
}
